<template>
  <m-page>
    <!-- 还款录入信息页 -->
    <m-header title="还款录入信息"></m-header>
    <div class="repayment_information">
      <div class="g-null"></div>
      <div class="g-list1">
        <p>融易通卡</p>
        <span>1212 **** **** 8845</span>
      </div>
      <div class="g-list1">
        <p>应还金额</p>
        <span>
          <ynet-amount :value="repayMoney" :precision="2" />元
        </span>
      </div>
      <div class="g-list1">
        <p>可提现金额</p>
        <span class="g-list1-span">
          <span>
            <ynet-amount :value="withdraw" :precision="2" />元
          </span>
          <span class="g-list1-msg">系统默认先从融易通卡余额扣款</span>
        </span>
      </div>
      <div class="g-null"></div>
      <div class="g-list2">
        <ynet-number-keyboard type="simple" ref="myNumberKeyBoard"></ynet-number-keyboard>
      </div>

      <!-- 当应还金额大于可提现金额时 需从银行转账 此时显示转账输入框 -->
      <div class="g-list3" v-if="repayMoney > withdraw">
        <ynet-field title="转账金额">
          <ynet-input-item
            ref="input15"
            v-model="value"
            type="digit"
            brief="转账金额=应还金额-可提现金额"
            :placeholder="'需从储蓄卡账户转入'+(repayMoney-withdraw)+'元'"
            size="normal"
            is-amount
            input-amount
            clearable
            desc
          >
            <ynet-icon name="rmb" size="lg" svg slot="left"></ynet-icon>
          </ynet-input-item>
        </ynet-field>
      </div>
      <div class="g-list2" @click="repaymentSubmit">
        <ynet-input-item
          title="融易通卡密码"
          placeholder="请输入融易通卡取款密码"
          is-amount
          readonly
          clearable
          v-model="password"
          type="password"
          :maxlength="6"
        ></ynet-input-item>
      </div>
      <div class="u-btn">
        <ynet-button type="default" v-if="password === ''">立即还款</ynet-button>
        <ynet-button type="warning" v-else @click="repayment">立即还款</ynet-button>
      </div>
      <div class="u-txt">
        <p>温馨提示:</p>
        <p>1、仅支持长沙银行储蓄账户还款。</p>
        <p>2、持卡人需要提前或于借款到期当日足额还款，否则未归还部分按万分之五/天记录透支利息。</p>
      </div>
    </div>
  </m-page>
</template>

<script>
import { Amount } from "ynet-mobile";
import ynetInputItem from "@components/input-item/index";
import ynetNumberKeyboard from "@components/number-keyboard/index";
import ynetButton from "@components/button/index";
import ynetField from "@components/field/index";
import ynetIcon from "@components/icon/index";
export default {
  components: {
    ynetInputItem,
    ynetNumberKeyboard,
    ynetButton,
    ynetField,
    ynetIcon,
    [Amount.name]: Amount
  },
  data() {
    return {
      repayMoney: 14000, //应还金额
      withdraw: 6000, //可提现金额
      password: "" //取款密码
    };
  },
  methods: {
    //页面跳转
    goto(item, data) {
      let url = `smallbusinessloan/rong_yi_tong_card/${item}`
      app.api.pushWindow( url ,params )
    },
    // 输入融易通卡取款密码
    repaymentSubmit() {
      this.password = "";
      //1、必输字段合法性校验
      //2、调用原生JSAPI(取款密码控件)
      app.api
        .showPaymentPad({
          title: "请输入融易通卡取款密码",
          subTitle: "",
          randomKey: "0",
          accountCardId: "工商银行(2736 2839 2738 5938)",
          contents: "信用卡还款"
        })
        .then(res => {
          console.log(res);
          this.password = res.data.pass;
        });
    },
    //立即还款按钮
    //点击按钮 发送还款信息 并得到还款结果 进入还款结果页
    repayment() {
      // 调用还款接口


      // 如果还款失败则出现提示框
      // app.api.alert('还款原因失败描述xxxxxxxxxxxx','还款失败',{ 
      //   okButton = '确定', 
      //   clickBgToHide = false,
      //   cancelGrayStyle = false});

      // 如果还款成功则进入还款结果页
      let data = {
        repayMoney: this.repayMoney, //应还金额
        withdraw: this.withdraw, //可提现金额
      }
      this.goto('repayment_result.html',data)
    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

